<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<%@ page isELIgnored="false" %> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>chat-index</title>
	<meta http-equiv="pragma" content="no-cache" />
	<meta http-equiv="cache-control" content="no-cache" />
	<meta http-equiv="expires" content="0" />    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3" />
	<meta http-equiv="description" content="This is my page" />
	<script type="text/javascript" src="<%=path %>/js/jquery-1.4.2.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery.easydrag.handler.beta2.js"></script>
	<script type="text/javascript" src="<%=path %>/js/jquery.overblock-1.2.js"></script>
	<script type="text/javascript" src="<%=path %>/js/u/constant.js"></script>
	<script type="text/javascript" src="<%=path %>/js/u/msg.js"></script>
	<link rel="stylesheet" type="text/css" href="<%=path %>/css/style.css" />
	
	<script type="text/javascript">
	var webSocket = null;
	jQuery(function(){
		webSocket = startWebSocket(ON_OPEN, ON_MESSAGE, ON_CLOSE, SEND_MESSAGE);
		
		console.log(webSocket);
		
		
	});
	//好友列表删除对象 
	function deleteUserFromList(user) {
		$('#userList #' + getUserListItemId(user.id)).remove();
	}
	//好友列表新增对象 
	function addUserToList(user) {
		var html = '';
		console.log(user);
		html += '<div class="userListItem" id="' + getUserListItemId(user.id) + '" ondblclick="clickUserListItem(\'' + user.id + '\');">';
		html += '	<div style="padding : 10px;">' + user.id + '</div>';
		html += '</div>';
		$('#userList').append(html);
	}
	//当前用户信息创建显示 
	function setCurrentUser(u) {
		$('#currentUser').html(u.id);
	}

	function clickUserListItem(id) {
		OPEN_MESSAGE_BOX_WITH_IF_EXISTS({
			toId : id,
			chatType : ChatType.PRIVATE_CHAT,
			ws : webSocket,
			msg : null,
			isCreateIfNotExist : true,
			isShow : true
		});
	}
 	</script>
	<style type="text/css">
	div.userListItem{
		width : 100%;
		cursor : pointer;
		moz-user-select: -moz-none;
		-moz-user-select: none;
		-o-user-select:none;
		-khtml-user-select:none;
		-webkit-user-select:none;
		-ms-user-select:none;
		user-select:none;
		background-color: #FFFAEB;
		margin-bottom : 1px;
		border-radius : 2px;
	}
	.noSelected{
		moz-user-select: -moz-none;
		-moz-user-select: none;
		-o-user-select:none;
		-khtml-user-select:none;
		-webkit-user-select:none;
		-ms-user-select:none;
		user-select:none;
	}
	div.userListItem:hover{
		background-color : #FDEBA8;
	}
	
	/** 聊天框 **/
	#chatBoxContainer{
		display : none;
		box-shadow : 1px 1px 11px gray;
		border-radius : 2px;
		background-color: #ADD5F0;
		opacity : 0.95;
	}
	#chatBoxTable{
		border : 0px;
		border-collapse : collapse;
	}
	#chatBoxTable td {
		border : 0px;
	}
	#chatBoxTable tr {
		border : 0px;
	}
	#chatBoxUserList{
		background-color : #059CD4;
		overflow-y : auto;
	}
	#chatBoxDivStatus{
		background-color : #DBEAF6;
		margin-left : -2px;
		border-bottom : 1px solid #C9D7E2;
	}
	#chatBoxDivs{
		background-color : #DBEAF6;
		border-bottom : 1px solid #C9D7E2;
		margin-left : -1px;
	}
	.pmdTextarea {
		margin-left:3px; 
		border : 0px solid #73B8E2;
		background-color: #DBEAF6;
		resize: none;
		overflow : auto;
		padding:4px;
		margin-top : 0px;
		margin-left : -2px;
	}
	.pmdTextarea:hover {
		border : 0px solid #73B8E2;
	}
	#chatBoxDivBottom {
		background-color: #DBEAF6;
		border : 1px solid #DBEAF6;
		margin-left : -2px;
		margin-top : -1px;
	}
	.chatInput{
		width : 50px;
		height : 20px;
		float : right;
		background-color : #00A2E5;
		text-align : center;
		padding-top : 3px;
		border-radius : 3px;
		cursor : pointer;
		color : white;
		margin-left : 10px;
		opacity : 1;
	}
	.chatInput:hover{
		background-color : #4BCAFF;
	}
	
	div.chatBoxUserItem{
		cursor : default;
		line-height : 30px;
		border-radius : 4px;
		color : white;
	}
	div.chatBoxUserItemSelected{
		background-color : #4BCAFF;
		color : black;
	}
	div.chatBoxUserItem:hover{
		background-color: rgba(123, 217, 255, 0.5);
	}
	
	/* 左侧导航按钮对应的红叉   */
	span.chatUserItemClose{
		padding-left : 5px;
		padding-right : 5px;
		padding-top : 1px;
		padding-bottom : 1px;
		border-radius : 10px;
		background-color : gray;
		color : white;
	}
	span.chatUserItemClose:hover{
		background-color : red;
	}
	</style>
</head>
<body>
	<div>
		<div id="navigation">
			<div id="currentUser"></div>
		</div>
		<div id="userList">
		
		</div><div style="clear : both;"></div>
		<div>
		</div>
	</div>
</body>
</html>
